<template>
	<view class="">
		<u-cell-item  icon="star-fill" :icon-style="{'color':'red'}" center @click="clickCarColor('车身颜色')" :value="color" :arrow="true" title="车身颜色">
		</u-cell-item>
		<u-popup v-model="showCarColor" mode="bottom" :mask-close-able="false">
			<view class="poppupBox">
				<view class="popupTitleStyle">
					<view style="float:left" @click="showCarColor=false">
						取消
					</view>
					<text>{{carTitle}}</text>
				</view>
				<view class="carBox">
					<view class="carBoxlist" :style="{'background-color': item.color}" v-for="item in carColorList"  @click="getCarColor(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "car-color",
		props:{
			color:{
				type:String,
				default: '请选择车身颜色'
			},
			inputAble:{
				type:Boolean,
				default: ''
			}
		},
		data() {
			return {
				showCarColor: false,
				carTitle: '车身颜色',
				carColorList: [{
						name: '白色',
						color: '#FFFAFA'
					},
					{
						name: '黑色',
						color: '#000'
					},
					{
						name: '银色',
						color: '#778899'
					},
					{
						name: '灰色',
						color: '#808080'
					},
					// {
					// 	name:'米色',
					// 	color:'#FFF5EE'
					// },
					{
						name: '红色',
						color: '#FF0000'
					},

					{
						name: '黄色',
						color: '#FFD700'
					},
					{
						name: '其他',
						color: '#FFFAFA'
					},

				],
			};
		},
		methods: {
			// 车身颜色
			clickCarColor(title) {
				if(!this.inputAble){
					this.showCarColor = true
				}
				else{
					this.$u.toast('请优先选择具体车型');
					this.showCarColor = false
				}
			},
			getCarColor(data) {
				console.log("11");
				this.showCarColor = false,
				// console.log(data);
				// this.color = data.name,
					this.$emit("getColor", data.name);
			},
		}
	}
</script>

<style scoped>
	.poppupBox {
		padding: 20rpx;
	}

	.poppupBoxlist {
		padding: 10rpx;
		border: 1px solid;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.popupTitleStyle {
		border-bottom: 1px solid #ccc;
		text-align: center;
		margin-bottom: 30rpx;
		padding-bottom: 10rpx;
	}

	.carBox {
		display: flex;
		/* justify-content: center; */
		flex-wrap: wrap;
		justify-items: center;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.carBoxlist {
		padding: 14rpx 46rpx;
		margin: 2%;
		/* 18rpx */
		box-shadow: 1px 2px 4px 0 #0000006b;
		color: #fff;
		text-shadow: 2px 1px 11px #000;
		border-radius: 10rpx;
		/* border:2px solid; */
	}

	.jingzhunButton {
		margin-bottom: 20rpx;
	}

	.searchContext {
		background: #fff;
		display: flex;
		padding: 0 32rpx;
		font-size: 40rpx;
	}

	.uploadTxt {
		position: absolute;
		bottom: 40rpx;
		color: #fff;
		font-size: 24rpx;
		width: 100%;
		text-align: center;
	}
</style>
